<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2023/10/18
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>列表学生</title>
    <%--1. 引入jquery--%>
    <script src="/webjars/jquery/3.6.4/jquery.min.js"></script>
    <%--2. 引入bootstrap的css库--%>
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <%--3. 引入bootstrap的js库--%>
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
        .table {
            text-align: center;
        }

        .panel-title {
            font-size: 22px;
            padding: 10px 0px;
        }

        .container {
            margin-top: 10px !important
        }

        .clearfix:after {
            content: '\20';
            display: block;
            height: 0;
            clear: both
        }

        .clearfix {
            zoom: 1
        }

        .modal-title {
            text-align: left;
        }
    </style>
    <script>
        //1. 添加学生
        function addStudent() {
            //1.1 显示对话框
            $('#myModal').modal('show')
        }

        //2. 保存学生
        function saveStudent() {
            document.studForm.submit();
        }
        //3. 点击分页按钮
        function skipPage(p) {
            //3.1 为隐藏域中的页数赋值
            $("#page").val(p)
            //3.2 提交表单
            document.searchForm.submit()
        }
    </script>
</head>
<body>
<div class="container">
    <%--按下 bs3 + （ctrl + j）出现提示--%>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">学生列表(SSM+Maven+BS+WebJars整合开发) </h3>
        </div>
        <table class="table table-striped table-hover">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>班级名称</td>
                <td>操作</td>
            </tr>
            <c:forEach items="${pr.rows}" var="stud">
                <tr>
                    <td>${stud.sid}</td>
                    <td>${stud.sname}</td>
                    <td>${stud.sex}</td>
                    <td>${stud.age}</td>
                    <td>${stud.addr}</td>
                    <td>${stud.cname}</td>
                    <td>
                        <a href="#" class="btn btn-success btn-sm">修改</a>
                        <a href="#" class="btn btn-danger btn-sm">删除</a>
                    </td>
                </tr>
            </c:forEach>
        </table>
        <div class="panel-footer text-right clearfix">
            <%--表单：查询条件--%>
            <c:if test="${pr.totalPage > 0}">
                <form class="form-inline" method="post" action="/student/search.do" name="searchForm"
                      style="float: left;margin-top: 20px;">
                    <input type="hidden" name="page" value="${param.page}" id="page">
                    <div class="form-group">
                            <%--{param.sname}--->request.getParameter("sname")--%>
                        <input type="text" class="form-control" name="sname" value="${vo.sname}" placeholder="输入学生姓名">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" name="addr" value="${param.addr}" placeholder="输入学生住址">
                    </div>
                    <div class="form-group">
                        <select class="form-control" name="cid">
                            <option value="0">所有班级</option>
                            <c:forEach items="${classes}" var="c">
                                <option value="${c.cid}"  ${param.cid == c.cid ? 'selected' : ''}>${c.cname}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-default">开始查询</button>
                    <button type="button" class="btn btn-success" onclick="addStudent()">添加学生</button>
                </form>
            </c:if>
            <%--编辑学生（添加或修改）   --%>

            <!-- Modal -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">添加学生</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" action="/student/add.do" method="post" name="studForm">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">姓名：</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="sname" placeholder="输入学生姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">性别：</label>
                                    <div class="col-sm-10">
                                        <div class="radio" style="text-align: left;">
                                            <label>
                                                <input type="radio" name="sex" id="sex1" value="男" checked>男
                                            </label>
                                            <label>
                                                <input type="radio" name="sex" id="sex2" value="女">女
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">年龄：</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="age" placeholder="输入学生年龄">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">住址：</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="addr" placeholder="输入学生住址">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">班级：</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="cid">
                                            <c:forEach items="${classes}" var="c">
                                                <option value="${c.cid}">${c.cname}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="saveStudent()">保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <%--分页导航--%>
            <c:if test="${pr.totalPage > 0}">
                <nav aria-label="Page navigation" style="float: right">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>

                            <%--动态生成导航页码--%>

                        <c:forEach begin="1" end="${pr.totalPage}" var="p">
                            <li class="${param.page == p ? 'active' : ''}"><a
                                    href="javascript:void(0)" onclick="skipPage(${p})">${p}</a></li>
                        </c:forEach>

                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </c:if>
            <c:if test="${pr.totalPage == 0 || pr.totalPage == null}">
                SSM + WebJars + BS + Maven整合开发.
            </c:if>
        </div>
    </div>
</div>
</body>
</html>
